<template>
  <div class="import-excel">
    <button @click="importExcel()" style="margin-bottom: 5px">Import Excel</button>
    <ag-grid-vue
      class="table ag-theme-balham"
      :gridOptions="tabOptions"
      :suppressColumnVirtualisation="true"
      :enableSorting="true"
      :enableFilter="true"
      :enableColResize="true"
      :groupHeaders="false"
      :suppressRowClickSelection="true"
      :toolPanelSuppressGroups="false"
      :toolPanelSuppressValues="false">
    </ag-grid-vue>
  </div>
</template>
 
<script>
import {AgGridVue} from 'ag-grid-vue'
import XLSX from "xlsx"
export default {
  name: 'vueName',
  components: {AgGridVue},
  data () {
    return {
      msg:'',
      tabOptions: {
        defaultColDef: {
          resizable: true
        },
        enableRangeSelection: true,
        rowSelection: 'multiple',
        context: {
          componentParent: this
        },
        columnDefs: [
          // {
          //   headerName: "Object",
          //   field: "Object",
          // },
          // {
          //   headerName: "Content",
          //   field: "Content",
          // },
        ],
        rowData: [
          // {"Object": "Customer", "Content": "Personal information"},
          // {"Object": "Customer", "Content": "Personal information"},
          // {"Object": "Customer", "Content": "Personal information"},
          // {"Object": "Customer", "Content": "Personal information"},
          // {"Object": "Customer", "Content": "Personal information"},
          // {"Object": "Customer", "Content": "Personal information"},
          // {"Object": "Customer", "Content": "Personal information"},
          // {"Object": "Customer", "Content": "Personal information"},
          // {"Object": "Customer", "Content": "Personal information"},
          // {"Object": "Customer", "Content": "Personal information"},
        ]
      },
    }
  },
  methods: {
    importExcel() {
      let _this = this
      this.makeRequest('GET',
        'https://www.ag-grid.com/example-excel-import/OlymicData.xlsx',
        // './OlymicData.xlsx',
        // success
        function (data) {
          let workbook = _this.convertDataToWorkbook(data);
          // console.log(workbook)
          _this.populateGrid(workbook);
        },
        // error
        function (error) {
          throw error;
        }
      );
    },
    makeRequest(method, url, success, error) {
      var httpRequest = new XMLHttpRequest();
      httpRequest.open("GET", url, true);
      httpRequest.responseType = "arraybuffer";

      httpRequest.open(method, url);
      httpRequest.onload = function () {
          success(httpRequest.response);
      };
      httpRequest.onerror = function () {
          error(httpRequest.response);
      };
      httpRequest.send();
    },
    convertDataToWorkbook(data) {
      /* convert data to binary string */
      var data = new Uint8Array(data);
      var arr = new Array();
      for (var i = 0; i !== data.length; ++i) {
        arr[i] = String.fromCharCode(data[i]);
      }
      var bstr = arr.join("");
      return XLSX.read(bstr, {type: "binary"});
    },
    populateGrid(workbook) {
      // our data is in the first sheet
      var firstSheetName = workbook.SheetNames[0];
      var worksheet = workbook.Sheets[firstSheetName];

      // we expect the following columns to be present
      var columns = {
          'A': 'athlete',
          'B': 'age',
          'C': 'country',
          'D': 'year',
          'E': 'date',
          'F': 'sport',
          'G': 'gold',
          'H': 'silver',
          'I': 'bronze',
          'J': 'total'
      };

      var rowData = [];

      // start at the 2nd row - the first row are the headers
      var rowIndex = 2;

      // iterate over the worksheet pulling out the columns we're expecting
      while (worksheet['A' + rowIndex]) {
          var row = {};
          Object.keys(columns).forEach(function(column) {
              row[columns[column]] = worksheet[column + rowIndex].w;
          });
          rowData.push(row);
          rowIndex++;
      }

      // finally, set the imported rowData into the grid
      this.tabOptions.api.setRowData(rowData);
    }
  }
}
</script>
 
<style scoped lang="scss">
  .table{
    height: 300px;
  }
</style>